<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="userId"
      label="用户ID"
      width="150">
    </el-table-column>

    <el-table-column
      prop="deptId"
      label="部门ID"
      width="120">
    </el-table-column>

    <el-table-column
      prop="userName"
      label="用户账号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="nickName"
      label="用户昵称"
      width="*">
    </el-table-column>

    <el-table-column
      prop="userType"
      label="用户类型"
      width="120">
    </el-table-column>

    <el-table-column
      prop="email"
      label="用户邮箱"
      width="120">
    </el-table-column>

    <el-table-column
      prop="phonenumber"
      label="手机号码"
      width="120">
    </el-table-column>

    <el-table-column
      prop="sex"
      label="用户性别"
      width="120">
    </el-table-column>

    <el-table-column
      prop="avatar"
      label="头像地址"
      width="120">
    </el-table-column>

    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>

    <el-table-column
      prop="status"
      label="帐号状态"
      width="120">
    </el-table-column>

    <el-table-column
      prop="delFlag"
      label="删除标志"
      width="120">
    </el-table-column>

    <el-table-column
      prop="loginIp"
      label="最后登录IP"
      width="120">
    </el-table-column>

    <el-table-column
      prop="loginDate"
      label="最后登录时间"
      width="120">
    </el-table-column>

    <el-table-column
      prop="createBy"
      label="创建者"
      width="120">
    </el-table-column>

    <el-table-column
      prop="createTime"
      label="创建时间"
      width="120">
    </el-table-column>

    <el-table-column
      prop="updateBy"
      label="更新者"
      width="120">
    </el-table-column>

    <el-table-column
      prop="updateTime"
      label="更新时间"
      width="120">
    </el-table-column>

    <el-table-column
      prop="remark"
      label="备注"
      width="120">
    </el-table-column>

    <el-table-column
      prop="qq"
      label="QQ"
      width="120">
    </el-table-column>

    <el-table-column
      prop="wx"
      label="微信"
      width="120">
    </el-table-column>

    <el-table-column
      prop="idCard"
      label="身份证号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="dingId"
      label="钉钉ID"
      width="120">
    </el-table-column>

    <el-table-column
      prop="dingUnionId"
      label="钉钉UnionId"
      width="120">
    </el-table-column>

    <el-table-column
      prop="wxOpenId"
      label="微信OpenId"
      width="120">
    </el-table-column>

    <el-table-column
      prop="wxUnionId"
      label="微信UnionId"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="160">
      <template slot-scope="scope">
        <el-button @click="handleUpdate(scope.row)" type="primary" size="small" plain>修改</el-button>
        <el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import {getSysUserList, deleteSysUser} from "@/api/sys/user";
  export default {
    created() {
      this.loadList();
    },
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      handleUpdate(row) {
        console.log('handleUpdate', row);
        this.$emit('update-record', row.userId)
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSysUser(row.userId).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadList()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      loadList() {
        getSysUserList().then(res => this.tableData = res);
      }
    },
  }
</script>